jQuery(document).ready(function($) {
    // Function to load posts based on year filter and page number.
    function loadPosts(year, paged) {
        var data = {
            action: 'cng_filter',
            year: year,
            paged: paged
        };
        $.post(cng_vars.ajax_url, data, function(response) {
            if ( response.success ) {
                $('#cng-posts-grid').html(response.data);
            }
        });
    }
    
    // Listen for changes on the year filter dropdown.
    $(document).on('change', '#cng-year-filter', function(){
        var year = $(this).val();
        loadPosts(year, 1);
    });
    
    // Listen for pagination link clicks.
    $(document).on('click', '.cng-pagination a', function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        var paged = 1;
        try {
            var link = document.createElement('a');
            link.href = href;
            // Try to get the 'paged' parameter from the query string.
            var params = new URLSearchParams(link.search);
            paged = params.get('paged');
            // If not found, try to extract it from the pathname (for pretty permalinks).
            if (!paged) {
                var matches = link.pathname.match(/\/page\/(\d+)\//);
                paged = matches ? matches[1] : 1;
            }
        } catch (error) {
            paged = 1;
        }
        var year = $('#cng-year-filter').val();
        loadPosts(year, paged);
        // Optional: Scroll to the top of the grid.
        $('html, body').animate({
            scrollTop: $(".cng-container").offset().top
        }, 500);
    });
    
});